<script setup>
import { Swiper, SwiperSlide } from "swiper/vue";
import { Thumbs, Autoplay } from "swiper/modules";
import "swiper/css";
import "swiper/css/thumbs";
const thumbsSwiper = ref(null);
const bigSwiper = ref(null);
const thumbsIndex = ref(0);
const { data } = await useFetch("/api/detail");
const detail = ref(data.value.data);

const setBigSwiper = (swiper) => {
  bigSwiper.value = swiper;
};
const setThumbsSwiper = (swiper) => {
  thumbsSwiper.value = swiper;
};
const onBigSlide = (swiper) => {
  changeSlide(swiper.realIndex);
};
const changeSlide = (index) => {
  thumbsIndex.value = index;
  thumbsSwiper.value.slideTo(index);
};
</script>
<template>
  <div>
    <Container>
      <div class="pt-[90px] flex flex-col md:flex-row">
        <div class="flex-1 md:w-0 overflow-hidden rounded-xl">
          <swiper
            ref="bigSwiper"
            @swiper="setBigSwiper"
            @slideChange="onBigSlide"
            :autoplay="{
              delay: 5000,
              disableOnInteraction: false,
            }"
            :modules="[Thumbs, Autoplay]"
            :thumbs="{ swiper: thumbsSwiper }"
          >
            <swiper-slide v-for="(item, index) in detail.imgList" :key="index">
              <div
                :style="{ backgroundImage: 'url(' + item.url + ')' }"
                class="w-full pb-[55%] origin-bottom overflow-hidden bg-center bg-cover rounded-xl"
              ></div>
            </swiper-slide>
          </swiper>
          <swiper
            @swiper="setThumbsSwiper"
            Autoplay
            :space-between="10"
            :slides-per-view="6"
            class="mt-6"
          >
            <swiper-slide v-for="(item, index) in detail.imgList" :key="index">
              <img
                @click="changeSlide(index)"
                :src="item.url"
                width="160"
                :class="[
                  'rounded-xl cursor-pointer opacity-30',
                  { 'opacity-[100%]': thumbsIndex == index },
                ]"
                alt=""
              />
            </swiper-slide>
          </swiper>
        </div>
        <div class="w-full md:w-[450px] md:ml-6 bg-[#20222e] rounded-xl p-6">
          <div class="flex items-center">
            <img width="100" class="rounded-md" :src="detail.url" alt="" />
            <div class="ml-4 font-bold text-[24px]">{{ detail.title }}</div>
          </div>
          <div class="flex flex-wrap space-x-2 mt-5">
            <div
              class="bg-[#000] bg-opacity-30 py-1 px-2 rounded-md"
              v-for="(item, index) in detail.typeList"
              :key="index"
            >
              {{ item }}
            </div>
          </div>
          <div class="opacity-60 mt-5">
            {{ detail.subTitle }}
          </div>
          <div class="mt-5 opacity-60 space-y-4">
            <div class="flex justify-between">
              <span>开发商</span>
              <span>{{ detail.author }}</span>
            </div>
            <div class="flex justify-between">
              <span>运营商</span>
              <span>{{ detail.published }}</span>
            </div>
            <div class="flex justify-between">
              <span>发行日期</span>
              <span>{{ detail.date }}</span>
            </div>
          </div>
          <div
            class="w-[full] text-center mt-[80px] h-[60px] mx-auto bg-gradient-to-r from-cyan-500 to-blue-500 hover:from-blue-500 hover:to-cyan-500 leading-[60px] rounded-md text-[20px] cursor-pointer"
          >
            一键开启
          </div>
        </div>
      </div>
    </Container>
    <DownLoad class="mt-10"></DownLoad>
  </div>
</template>
<style scoped lang="scss"></style>
